<template>
  <div>
    <puplic-modal
      width="1200px"
      :publicVisible="publicVisible"
      modalStyle="addEditSupportModal"
      @cancel="cancel"
      @handleOk="handleOk"
      confirmContext="发布"
      :title="title"
    >
      <div slot="content" class="content">
        <div class="search-group" style="width: 35%">
          <div class="input-wrap" style="width: 100%">
            <div class="label">类型:</div>
            <div class="input-item" style="width: 100%">
              <a-select
                allowClear
                ref="select"
                placeholder="请选择文章类型"
                :disabled="noticeTypeDisabled"
                v-model="queryParam.noticeType"
              >
                <a-select-option value="1">行业动态</a-select-option>
              </a-select>
            </div>
          </div>
        </div>

        <div class="search-group" style="width: 35%">
          <div class="input-wrap" style="width: 100%">
            <div class="label">标题:</div>
            <div class="input-item" style="width: 100%">
              <a-input :maxLength="30" clearable v-model="textTitle" placeholder="请输入标题" />
            </div>
          </div>
        </div>

        <div class="search-group">
          <div class="input-wrap">
            <div class="label">封面:</div>
            <div class="input-item flex align-center">
              <a-upload
                accept="image/png, image/JPG,image/jpeg"
                list-type="picture-card"
                :file-list="fileList"
                :remove="remove"
                @change="picturesChange"
                :customRequest="customRequest"
                :showUploadList="showUploadList"
              >
                <div v-if="fileList.length < 1"><a-icon type="plus" /></div>
              </a-upload>
            </div>
          </div>
        </div>

        <u-editor
          class="mt-10"
          styleStr="width: 100%; height: 100%"
          :message="message"
          @change="contentChange"
          @inputStringLength="getStringLength"
        ></u-editor>
        <!-- :type="records.imgType" -->
        <span style="color: #05b3b9">最长输入{{ quillStringLength }}/ 10000</span>
      </div>
    </puplic-modal>
  </div>
</template>
<script>
import UEditor from '@/components/UEditor'
import puplicModal from '@/components/publicModal'
import { comMethods } from '@/mixins/comMethods'
import { ajaxGetDictItems, uploadUeditorImg } from '@/api/api'
import { articlesAdd, articlesEdit } from '@/api/articles'
export default {
  components: { puplicModal, UEditor },
  mixins: [comMethods],
  name: 'addEditSupportModal',
  data() {
    return {
      queryParam: {
        noticeType: '1',
      },
      title: '新增',
      records: {},
      publicVisible: false,
      informationList: [],
      message: '',
      msgContent: '',
      textTitle: '',
      fileList: [],
      fileUrl: [],
      noticeTypeDisabled: false,
      quillStringLength: 0,
      showUploadList: {
        // upload 配置项
        showPreviewIcon: false,
      },
      imgPrefix: '',
    }
  },
  mounted() {},
  methods: {
    show(records) {
      this.records = records
      if (records && records.id) {
        this.title = '编辑'
        this.noticeTypeDisabled = true
        this.textTitle = records.title
        this.message = records.content
        this.queryParam.noticeType = records.noticeType.toString()
        if (records.noticeType == 1) {
          if (records.coverUrl) {
            let obj = {
              uid: 0,
              name: 'image.png',
              status: 'done',
              url: this.imgPrefix + records.coverUrl,
            }
            this.fileList[0] = obj
            this.fileUrl[0] = records.coverUrl
          }
          // this.queryParam.industryInformationId = records.industryInformationId.toString()
        }
      } else {
        this.title = '新增'
        this.message = ''
        this.textTitle = ''
      }
      this.publicVisible = true
    },
    picturesChange(info) {
      info.file.status = 'done'
      this.fileList = info.fileList
    },
    remove(file) {
      let uid = file.uid
      let index = this.fileList.findIndex((v) => {
        return v.uid == uid
      })
      this.fileUrl.splice(index, 1)
    },

    async customRequest(info) {
      const isJpgOrPng =
        info.file.type === 'image/jpeg' || info.file.type === 'image/png' || info.file.type === 'image/jpg'
      if (!isJpgOrPng) {
        this.$message.error('只能上传JPG,PNG格式图片!')
      }
      const isLt2M = info.file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2MB!')
      }
      if (isJpgOrPng && isLt2M) {
        let formData = new FormData()
        formData.append('file', info.file)
        formData.append('type', 1)
        formData.get('file')
        let { result } = await uploadUeditorImg(formData)
        this.fileUrl.push(result.halfPath)
      }
    },

    contentChange(value) {
      this.msgContent = value
    },
    getStringLength(value) {
      this.quillStringLength = value
      if (value > 10000) this.$message.error('字段超长不能被提交')
    },
    async handleOk() {
      if (this.textTitle == '') {
        this.$message.warn('请输入标题')
        return
      }
      if (this.msgContent == '') {
        this.$message.warn('请上传内容')
        return
      }

      if (this.quillStringLength > 10000) {
        this.$message.error('字段超长不能被提交')
        return
      }

      let data = {
        title: this.textTitle,
        content: this.msgContent,
        coverUrl: this.fileUrl[0],
        noticeType: this.queryParam.noticeType,
        industryInformationId: this.queryParam.industryInformationId,
      }

      if (this.title == '新增') {
        let res = await articlesAdd(data)
        this.$message.success(res.message)
        this.publicVisible = false
        this.$emit('refresh')
        this.cancel()
      } else {
        data.id = this.records.id
        let res = await articlesEdit(data)
        this.$message.success(res.message)
        this.publicVisible = false
        this.$emit('refresh')
        this.cancel()
      }
    },

    cancel() {
      this.message = ''
      this.fileUrl = []
      this.fileList = []
      this.textTitle = ''
      this.msgContent = ''
      this.publicVisible = false
      this.quillStringLength = ''
      this.noticeTypeDisabled = false
      this.queryParam.noticeType = '1'
      this.queryParam.industryInformationId = undefined
    },
  },
}
</script>
<style lang="less">
@import '~@/assets/less/common.less';
.ant-upload.ant-upload-select-picture-card,
.ant-upload {
  background: #065054;
  border-color: #036265;
}
.addEditSupportModal {
  .content {
    padding: 0.2rem 0.2rem 0.1rem 0.2rem !important;
  }
  .mt-10 {
    margin-top: 0.1rem;
  }
  .items {
    margin-bottom: 0.1rem;
    .label {
      display: inline-block;
      vertical-align: middle;
      width: 0.5rem;
    }
    .value {
      display: inline-block;
      vertical-align: middle;
      width: calc(100% - 0.7rem);
    }
  }
  .uploadImg {
    .label {
      vertical-align: top;
    }
    .value {
      vertical-align: top;
    }
  }
  .search-group {
    padding: 0;
    background: #034c54;
  }
}
</style>
